



<template>


  <el-dialog v-model="showMassageBox" :title="senderName" style="background-color: #F5F3F5;width: 530px">

    <div class="box-chat1">
      <div class="box-chat1-left">
<!--        <span>{{allMassage}}</span>-->
        <div v-for="i in senderMassage_array.length" :key="i" style="border: none; height: 60px" >
          <avatar-component  :size="35" :user-name="senderAdmin" style="float: left;margin-left: 10px"></avatar-component>

          <div  class="pop" >
            <div class="arrow"></div>
            {{senderMassage_array[i-1]}}
<!--            {{allMassage[i-1]}}-->
          </div>



        </div>



    </div>
      <div class="box-chat1-right">

        <div  v-for="i in receiverMassage_array.length" :key="i" style="border: none;height: 60px">
          <avatar-component  :size="35" :user-name="username" style="float: right"></avatar-component>
          <div  class="pop2">
            <div class="arrow2"></div>
            {{receiverMassage_array[i-1]}}

          </div>
        </div>

        <div  v-for="i in now_edit_massage.length" :key="i" style="border: none;height: 60px">
          <avatar-component  :size="35" :user-name="username" style="float: right;margin-left: 15px"></avatar-component>
          <div  class="pop2">
            <div class="arrow2"></div>
           {{now_edit_massage[i-1]}}
          </div>
        </div>


      </div>
    </div>

    <div class="box-chat2">
      <textarea class="box-text" v-model="massage_text"></textarea>
       <el-button type="primary" @click="send">发送</el-button>
    </div>
  </el-dialog>

<div class="main-friend">
  <div class="box-avatar" >
    <div   v-for="i in admin_array.length" :key="i"><avatar-component :size="35"  :user-name="admin_array[i-1]"></avatar-component></div>

  </div>

  <div class="box-friendList">
    <el-table :data="tableData" style="width: 100%">
<!--      <el-table-column label="头像">
        <avatar-component :size="35" ></avatar-component>
      </el-table-column>-->
<!--      <el-table-column  prop="userName"><AvatarComponent :user-name=""></AvatarComponent></el-table-column>-->
      <el-table-column label="好友账号" prop="friendUsername" />
      <el-table-column label="好友昵称" prop="friendName" />
      <el-table-column align="right">

        <template #header>
          <el-input v-model="search" size="small" placeholder="Type to search" />
        </template>
        <template #default="scope">
          <el-button size="small" @click="chat(scope.$index)"
          >私信</el-button
          >
          <el-button
              type="danger"
              size="small"
              @click.prevent="deleteRow(scope.$index)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

</div>

</template>

<script>
import axios from "axios";
import AvatarComponent from "@/components/AvatarComponent";
// import AvatarComponent from "@/components/AvatarComponent";

export default {
  components: {AvatarComponent},
  data() {
    return {

      showMassageBox:false,
      tableData: [],
      admin_array: [],
      //登陆者信息
      username:'',
      name:"",


      senderName:"",
      senderAdmin:"",
      senderMassage_array:[],
      receiverMassage_array:[],
      MassageTime_array:[],
      allMassage:[],
      massage_text:"",
      now_edit_massage:[],


    }
  },
  created() {

    const _this = this//将全局变量赋值到局部

    _this.username= this.$route.query.username
    axios({
      method: 'post',
      url: 'http://localhost:8081/showUserByAdmin',
      params: {
        userName: _this.username
      }
    })
        .then(function (response) {
          console.log(response)
          _this.name=response.data.at(0).name
          console.log(_this.name)
        })
        .catch(function (error) {
          console.log(error);
        });



    axios({
            method: 'post',
            url: 'http://localhost:8081/showFriend',
            params: {
              userName: this.username
            }
          })
              .then(function (response) {
                console.log(response)
                _this.tableData = response.data
                for (let i = 0; i < response.data.length; i++) {
                  _this.admin_array[i] = response.data.at(i).friendUsername
                }
                console.log(_this.admin_array)
              })
              .catch(function (error) {
                console.log(error);
              });

        },

  methods:{

    send(){
      this.now_edit_massage.push(this.massage_text)
      axios({
        method: 'post',
        url: 'http://localhost:8081/sendMassage',
        params: {
          senderAdmin:this.username,
          senderName:this.name,
          receiverAdmin:this.senderAdmin,//sender变为接收者
          message:this.massage_text,
          isRead:"0"
        }
      })
          .then(function (response) {
            console.log(response)
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    chat(index){
      this.now_edit_massage.length=0
      this.senderMassage_array.length=0
      this.receiverMassage_array.length=0
      this.senderAdmin=this.tableData.at(index).friendUsername
      this.senderName=this.tableData.at(index).friendName
      const _this = this//将全局变量赋值到局部
      console.log(this.tableData.at(index).friendUsername)
      this.showMassageBox=true;
      /**
       * 轮询数据库
       * @type {NodeJS.Timer}
       */
      this.timer = setInterval(() => {
        axios({
          method: 'post',
          url: 'http://localhost:8081/showMassageBySender',
          params: {
            senderAdmin:this.tableData.at(index).friendUsername,
            receiverAdmin:this.username
          }
        })
            .then(function (response) {
              console.log(response.data)
              for (let i = 0; i <response.data.length; i++) {
                _this.senderMassage_array[i]=response.data.at(i).message
              }
              // console.log(_this.senderMassage_array)
            })
            .catch(function (error) {
              // console.log(error);
            })

      }, 5000)
      if(this.showMassageBox==false){
        alert("关闭")
        clearInterval(this.timer);
      }







    axios({
        method: 'post',
        url: 'http://localhost:8081/showMassageBySender',
        params: {
          senderAdmin:this.tableData.at(index).friendUsername,
          receiverAdmin:this.username
        }
      })
          .then(function (response) {
            console.log(response.data)
            console.log(response.data.length)
            console.log(response.data.at(0).message)
            for (let i = 0; i <response.data.length; i++) {
              _this.senderMassage_array[i]=response.data.at(i).message
            }
            console.log(_this.senderMassage_array)

          })
          .catch(function (error) {
            console.log(error);
          })

      //我发送的所有消息
      axios({
        method: 'post',
        url: 'http://localhost:8081/showMassageBySender',
        params: {
          senderAdmin:this.username,
          receiverAdmin:this.tableData.at(index).friendUsername
        }
      })
          .then(function (response) {
            console.log(response.data)
            for (let i = 0; i <response.data.length; i++) {
              _this.receiverMassage_array[i]=response.data.at(i).message

            }

            _this.allMassage=_this.senderMassage_array+_this.receiverMassage_array

            console.log(_this.receiverMassage_array)
          })
          .catch(function (error) {
            console.log(error);
          })
      //对方发送的所有消息


    },
    deleteRow(index){
      // alert(this.tableData.at(index).friendUsername)

      axios({
        method: 'post',
        url: 'http://localhost:8081/deleteFriendByAdmin',
        params: {
          userName: this.username,
          friendUsername:this.tableData.at(index).friendUsername
        }
      })
          .then(function (response) {
            console.log(response)

          })
          .catch(function (error) {
            console.log(error);
          });
      this.tableData.splice(index,1)
    }
  }
}
</script>
<style>
.box-avatar{
 position: absolute;
/*position: absolute;*/
/*  border: solid 1px;*/
  width: 50px;
  margin-top: 40px;
}
.box-friendList{
position: relative;
  /*border: solid 1px;*/
  width: 1000px;
  margin-left: 50px;
}
.box-chat1{
  width: 500px;
  height: 400px;
  /*border: solid 1px;*/
  margin-right: 10px;
  /*margin-left: 100px;*/
  background-color: #FFFFFF;
}
.box-chat1-left{
  position: absolute;
  width: 250px;
  height: 400px;
  /*border: solid 1px;*/
  float: left;
}

.box-chat1-right{
  width: 250px;
  height: 400px;
  /*border: solid 1px;*/
  float: right;
}
.box-chat2{
  /*margin-left: 30px;*/
  width: 500px;
  height: 100px;
  border-top: solid 1px;
}
/*气泡*/
.pop {
  position: absolute;
  float: left;
  width:100px;
  height:35px;
  line-height: 33px;
  /*background:#fff;*/
  color:#fff;
  border-radius:5px; /* 圆角 */
  background-color: #4D4948;
  border:1px solid #4D4948;
  margin-left: 65px;
  margin-top: 10px;

}
/*尖角在左侧*/
.pop .arrow {
  position:absolute;

  top:5px;
  left:-20px; /* 圆角的位置需要细心调试哦 */
  width:0;
  height:0;
  font-size:0;
  border:solid 8px;
  border-color:#fff #4D4948 #fff #fff;
}
/*气泡*/
.pop2 {
  position: relative;
  float: right;
  width:100px;
  height:35px;
  line-height: 33px;
  /*background:#fff;*/
  color:#fff;
  border-radius:5px; /* 圆角 */
  background-color: lightskyblue;
  margin-right: 20px;
  margin-top: 10px;
  border: none;

}
/*尖角在左侧*/
.pop2 .arrow2 {
  position:absolute;
  top:5px;
  left:105px; /* 圆角的位置需要细心调试哦 */
  width:0;
  height:0;
  font-size:0;
  border:solid 8px;
  border-color:#fff #fff #fff lightskyblue  ;
}
.box-text{
  width: 500px;
  height: 100px;
  border: none;
}
</style>
